{% load static %}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="{% static 'css/iconfont.css' %}">
	<link rel="stylesheet" href="{% static 'css/global.css' %}">
	<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
	<link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
	<link rel="stylesheet" href="{% static 'css/swiper.min.css' %}">
	<link rel="stylesheet" href="{% static 'css/styles.css' %}">
	<script src="{% static 'js/jquery.1.12.4.min.js' %}" charset="UTF-8"></script>
	<script src="{% static 'js/bootstrap.min.js' %}" charset="UTF-8"></script>
	<script src="{% static 'js/swiper.min.js' %}" charset="UTF-8"></script>
	<script src="{% static 'js/global.js' %}" charset="UTF-8"></script>
	<script src="{% static 'js/jquery.DJMask.2.1.1.js' %}" charset="UTF-8"></script>
	<title>X袋网</title>
</head>
<body>
	<!-- 顶部tab -->
	<div class="tab-header">
		<div class="inner">
			<div class="pull-left">
				<div class="pull-left">嗨，欢迎来到<span class="cr">X袋网</span></div>
				<a href="agent_level.html">网店代销</a>
				<a href="temp_article/udai_article4.html">帮助中心</a>
			</div>
			<div class="pull-right">
                {% if username %}
                    <a href=""><span class="cr">{{ username }}</span></a>
                {% else %}
                    <a href="{% url 'login_register:login' %}"><span class="cr">登录</span></a>
                {% endif %}

				<a href="login.html?p=register">注册</a>
				<a href="udai_welcome.html">我的X袋</a>
				<a href="udai_order.html">我的订单</a>
				<a href="udai_integral.html">积分平台</a>
			</div>
		</div>
	</div>
	<!-- 顶部标题 -->
	<div class="bgf5 clearfix">
		<div class="top-user">
			<div class="inner">
				<a class="logo" href="{% url 'home_page:index' %}"><img src="{% static 'images/icons/logo.jpg' %}" alt="X袋网" class="cover"></a>
				<div class="title">购物车</div>
			</div>
		</div>
	</div>
	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="user-content__box clearfix bgf">
				<div class="title">购物车</div>
				<form action="{% url 'shop_cart:shopcart' %}" method="post" class="shopcart-form__box">
                {% csrf_token %}
					<table class="table table-bordered">
						<thead>
							<tr>
								<th width="150">
									<label class="checked-label"><input type="checkbox" class="check-all"><i></i> 全选</label>
								</th>
								<th width="300">商品信息</th>
								<th width="150">单价</th>
								<th width="200">数量</th>
								<th width="200">现价</th>
								<th width="80">操作</th>
							</tr>
						</thead>
						<tbody>
                        {% for cart in carts %}
                            {% for c_info,good_info in cart.items %}
                                {% for g_name,good in good_info.items %}
                                    <tr class="trr">
                                            <th scope="row">
                                                <label class="checked-label">
                                                    <input type="checkbox" value="{{ c_info.cart_id }}" name="checked" class="cart_id"><i></i>
                                                    <div class="img"><img src="{% static 'images/temp/M-003.jpg' %}" alt="" class="cover"></div>
                                                </label>
                                            </th>
                                            <td>
                                                <div class="name ep3">{{ g_name }}</div>
                                                <div class="type c9">颜色分类：{{ good.goods_info_color }}  尺码：{{ good.goods_info_size }}</div>
                                            </td>
                                            <td class="price_1">{{ good.goods_info_price }}元</td>
                                            <td>
                                                <div class="cart-num__box">
                                                    <input type="button" class="sub" value="-" name="{{ c_info.cart_id }}">
                                                    <input type="text" class="val" value="{{ c_info.number }}" maxlength="2" name="aaa">
                                                    <input type="button" class="add" value="+" name="{{ c_info.cart_id }}">
                                                </div>
                                            </td>
                                            <td class="price">{{ good.goods_info_price }}元</td>
                                            <td><a href="" class="aa" name="{{ c_info.cart_id }}">删除</a></td>
                                    </tr>
                                    {% endfor %}
                            {% endfor %}
                        {% endfor %}
						</tbody>
					</table>

					<div class="user-form-group tags-box shopcart-submit pull-right">
						<button type="submit" class="btn">提交订单</button>
					</div>
					<div class="checkbox shopcart-total">
						<label><input type="checkbox" class="check-all"><i></i> 全选</label>
						<div class="pull-right">
							已选商品 <span class="num"><em>0</em></span> 件
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合计（不含运费）
							<b class="cr">¥<span class="fz24"><b>0.00</b></span></b>
						</div>
					</div>
                <script>
                        function  get_cart_info() {
                            total_price = 0;
                            total_count =0;
                            $('.trr').find(':checked').parents('tr').each(function () {
                                //获取商品的数量和小计
                                count = $(this).find('.val').val();
                                amount = $(this).children('.price_1').text();
                                count = parseInt(count);
                                amount = parseFloat(amount)*count;
                                total_count += count;
                                total_price += amount;
                            });
                            $('.pull-right').find('em').text(total_count);
                            $('.pull-right').find('b').text(total_price.toFixed(2));
                        }
                    </script>

                    <script>
						$(document).ready(function(){
							var $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]'),
								$check_all = $('.check-all');
							// 全选
							$check_all.on('change', function() {
								$check_all.prop('checked', $(this).prop('checked'));
								$item_checkboxs.prop('checked', $(this).prop('checked'));
								get_cart_info()
							});
							// 点击选择
							$item_checkboxs.on('change', function() {
								var flag = true;
								$item_checkboxs.each(function() {
									if (!$(this).prop('checked')) { flag = false }
								});
								$check_all.prop('checked', flag);
								get_cart_info()
							});
							{#// 个数限制输入数字#}
							{#$('input.val').onlyReg({reg: /[^0-9.]/g});#}
							{#// 加减个数#}
							{#$('.cart-num__box').on('click', '.sub,.add', function() {#}
							{#	var value = parseInt($(this).siblings('.val').val());#}
							{#	if ($(this).hasClass('add')) {#}
							{#		$(this).siblings('.val').val(Math.min((value += 1),99));#}
							{#		get_cart_info()#}
							{#	} else {#}
							{#		$(this).siblings('.val').val(Math.max((value -= 1),1));#}
							{#		get_cart_info()#}
							{#	}#}
							//{);
						});
					</script>


                    <script>
                        //计算商品的小计
                        function update_goods_amount(trr) {
                            //获取商品的价格和数量
                            price = trr.children('.price_1').text();
                            count = trr.find('.val').val();
                            //计算商品的小计
                            amount = parseInt(count) * parseFloat(price);
                            //设置商品的小计
                            $(trr).children('.price').text(amount.toFixed(2)+'元')
                        }

                        //购物车增加商品数量
                        $('.add').click(function () {
                            //获取订单id和数量
                            cart_id = $(this).attr('name');
                            count = $(this).prev().val();
                            count = parseInt(count) + 1;
                            csrf = $('input[name="csrfmiddlewaretoken"]').val();
                            //组织参数
                            params = {'cart_id': cart_id, 'count': count, 'csrfmiddlewaretoken':csrf};
                            error_update = false;
                            total = 0;
                            //设置ajax请求为同步
                            $.ajaxSettings.async = false;
                            //向后端发送ajax post请求
                            $.post('http://127.0.0.1:8000/shopcart/update_cart/', params, function (data) {
                                if(data.error == 'ok'){
                                    error_update = false;
                                    total = data.total_count
                                }
                                else{
                                    //更新失败
                                    error_update = true;
                                    alert(data.error_msg)
                                }
                            });
                            //设置ajax请求为异步
                            $.ajaxSettings.async = true;
                            //判断是否更新成功
                            if(error_update == false){
                                //重新设置页面上的商品数量
                                $(this).prev().val(count);
                                //计算商品小件
                                update_goods_amount($(this).parents().parents().parents('.trr'));
                                // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
                                is_checked = $(".trr").find('.cart_id').prop('checked');
                                if (is_checked){
                                    // 更新页面信息
                                    get_cart_info();
                                }
                                }
                        });

                         //购物车减少商品数量
                        $('.sub').click(function () {
                            //获取订单id和数量
                            cart_id = $(this).attr('name');
                            count = $(this).next().val();
                            count = parseInt(count) - 1;
                            if(count<=0){
                                count=1;
                                alert('数量不能小于1')
                            }
                            csrf = $('input[name="csrfmiddlewaretoken"]').val();
                            //组织参数
                            params = {'cart_id': cart_id, 'count': count, 'csrfmiddlewaretoken':csrf};
                            error_update = false;
                            total = 0;
                            //设置ajax请求为同步
                            $.ajaxSettings.async = false;
                            //向后端发送ajax post请求
                            $.post('http://127.0.0.1:8000/shopcart/update_cart/', params, function (data) {
                                if(data.error == 'ok'){
                                    error_update = false;
                                    total = data.total_count
                                }
                                else{
                                    //更新失败
                                    error_update = true;
                                    alert(data.error_msg)
                                }
                            });
                            //设置ajax请求为异步
                            $.ajaxSettings.async = true;
                            //判断是否更新成功
                            if(error_update == false){
                                //重新设置页面上的商品数量
                                $(this).next().val(count);
                                //计算商品小件
                                update_goods_amount($(this).parents().parents().parents('.trr'));
                                // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
                                is_checked = $(".trr").find('.cart_id').prop('checked');
                                if (is_checked){
                                    // 更新页面信息
                                    get_cart_info();
                                }
                                }
                        })
                    </script>

                    <script>
                        //删除购物车记录
                        $(".aa").click(function () {
                            //获取订单id
                            cart_id = $(this).attr('name');
                            csrf = $('input[name="csrfmiddlewaretoken"]').val();
                            params = {'cart_id': cart_id, "csrfmiddlewaretoken":csrf};
                            //获取商品所在的tr元素
                            cart_tr = $(this).parents().parents('.trr');
                            $.post('http://127.0.0.1:8000/shopcart/del_cart/', params, function (data) {
                                if(data.error == 'ok'){
                                    //删除成功，移除页面上商品所在的tr元素
                                    cart_tr.remove();
                                    //获取被删除商品是否为选中状态
                                    is_checked = cart_tr.find('.cart_id').prop('checked');
                                    if(is_checked){
                                        //更新页面信息
                                        get_cart_info()
                                    }
                                }
                                else{
                                    alert(data.error_msg)
                                }
                            })
                        })
                    </script>


				</form>
			</div>
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div class="right-nav">
		<ul class="r-with-gotop">
			<li class="r-toolbar-item">
				<a href="udai_welcome.html" class="r-item-hd">
					<i class="iconfont icon-user" data-badge="0"></i>
					<div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="udai_shopcart.html" class="r-item-hd">
					<i class="iconfont icon-cart"></i>
					<div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="udai_collection.html" class="r-item-hd">
					<i class="iconfont icon-aixin"></i>
					<div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="" class="r-item-hd">
					<i class="iconfont icon-liaotian"></i>
					<div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="issues.html" class="r-item-hd">
					<i class="iconfont icon-liuyan"></i>
					<div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
				</a>
			</li>
			<li class="r-toolbar-item to-top">
				<i class="iconfont icon-top"></i>
				<div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
			</li>
		</ul>
		<script>
			$(document).ready(function(){ $('.to-top').toTop({position:false}) });
		</script>
	</div>
	<!-- 底部信息 -->
	<div class="footer">
		<div class="footer-tags">
			<div class="tags-box inner">
				<div class="tag-div">
					<img src="{% static 'images/icons/footer_1.gif' %}" alt="厂家直供">
				</div>
				<div class="tag-div">
					<img src="{% static 'images/icons/footer_2.gif' %}" alt="一件代发">
				</div>
				<div class="tag-div">
					<img src="{% static 'images/icons/footer_3.gif' %}" alt="美工活动支持">
				</div>
				<div class="tag-div">
					<img src="{% static 'images/icons/footer_4.gif' %}" alt="信誉认证">
				</div>
			</div>
		</div>
		<div class="footer-links inner">
			<dl>
				<dt>X袋网</dt>
				<a href="temp_article/udai_article10.html"><dd>企业简介</dd></a>
				<a href="temp_article/udai_article11.html"><dd>加入X袋</dd></a>
				<a href="temp_article/udai_article12.html"><dd>隐私说明</dd></a>
			</dl>
			<dl>
				<dt>服务中心</dt>
				<a href="udai_article1.html"><dd>售后服务</dd></a>
				<a href="temp_article/udai_article2.html"><dd>配送服务</dd></a>
				<a href="temp_article/udai_article3.html"><dd>用户协议</dd></a>
				<a href="temp_article/udai_article4.html"><dd>常见问题</dd></a>
			</dl>
			<dl>
				<dt>新手上路</dt>
				<a href="temp_article/udai_article5.html"><dd>如何成为代理商</dd></a>
				<a href="temp_article/udai_article6.html"><dd>代销商上架教程</dd></a>
				<a href="temp_article/udai_article7.html"><dd>分销商常见问题</dd></a>
				<a href="temp_article/udai_article8.html"><dd>付款账户</dd></a>
			</dl>
		</div>
		<div class="copy-box clearfix">
			<ul class="copy-links">
				<a href="agent_level.html"><li>网店代销</li></a>
				<a href="class_room.html"><li>X袋学堂</li></a>
				<a href="udai_about.html"><li>联系我们</li></a>
				<a href="temp_article/udai_article10.html"><li>企业简介</li></a>
				<a href="temp_article/udai_article5.html"><li>新手上路</li></a>
			</ul>
			<!-- 版权 -->
			<p class="copyright">
				© 2005-2018 X袋网 版权所有，并保留所有权利。 技术支持：<a style="font-family:'Microsoft Yahei'; color:#666;" href="http://www.jsdaima.com/" title="js代码" target="_blank">js代码</a><br>
				ICP备案证书号：ICP备XXXXXXXX号&nbsp;&nbsp;&nbsp;&nbsp;中国北京朝阳区环球国际金融中心大厦99F&nbsp;&nbsp;&nbsp;&nbsp;Tel: 18888888888&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 18888888888@qq.com
			</p>
		</div>
	</div>
</body>
</html>